<template>
  <!--物资管理/设备管理页面-->
  <div>
    <cus-search style="min-width: 1200px">
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="100">
          <FormItem class="mr_48 mb_24" label="用户名称" prop="name">
            <Input
              v-trim
              clearable
              placeholder="请输入用户名称"
              maxlength="20"
              v-model="form.name"
              style="width: 200px"
            />
          </FormItem>
          <FormItem class="mr_48 mb_24" label="用户来源" prop="fromSource">
            <Select
              style="width: 200px"
              clearable
              v-model="form.fromSource"
              placeholder="全部"
            >
              <Option
                v-for="(item, index) in fromSourceList"
                :value="item.id"
                :key="index.id"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <cusButton
            class="mr_20 mb_20"
            type="primary"
            v-permission="10"
            @onClick="
              pages.page = 1;
              postApiOperatorInfoByPageApi();
            "
            >查询</cusButton
          >
          <cusButton
            class="mr_20 mb_20"
            type="primary"
            v-permission="10"
            @onClick="reset()"
            >重置</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card style="margin-top: 20px; padding-top: 20px" :showTitle="false">
      <div class="btnBox">
        <cusButton
          class="mr_20"
          v-permission="20"
          type="primary"
          @onClick="onAdd()"
          style="width: 150px"
          >添加</cusButton
        >
      </div>
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :height="435"
      >
        <template slot-scope="{ row, index }" slot="photoAddress">
          <div style="display: flex; justify-content: center">
            <div class="table-cell-img" v-if="row.photoAddress">
              <img
                :src="row.photoAddress"
                alt=""
                class=""
                border="0"
                onload="autosize(this,50,50);"
                @click="$cu.previewImage(row.photoAddress)"
              />
            </div>
            <div v-else>暂未上传</div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onEdit(row)"
            >
              <Icon type="md-color-filter" size="4" style="margin: 2px 5px 0 0" />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="40"
              :style="{ color: row.status == 1 ? '#FF4746' : 'green' }"
              style="padding: 0 5px"
              @onClick="onStatus(row)"
            >
              <Icon
                :type="row.status == 1 ? 'ios-close-circle' : 'md-checkbox-outline'"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>{{ row.status == 0 ? "启用" : "禁用" }}</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="50"
              :style="{ color: '#1E6FFF', padding: '0 8px' }"
              @onClick="editPassword(row)"
            >
              <Icon type="md-sync" size="4" style="margin: 2px 5px 0 0" />
              <span>修改密码</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="mt_20 cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="postApiOperatorInfoByPageApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!--添加设备被信息-->
    <addPeople ref="addPeople"></addPeople>
  </div>
</template>
<script>
import {
  postApiOperatorInfoByPage,
  deleteTouchscaleList,
  getUnitInfo,
  postApisaveOperatorInfo,
} from "@/api/business/manager";
import addPeople from "./components/addPeople.vue";

export default {
  components: { addPeople },
  data() {
    return {
      form: {
        loading: false,
        name: "", // 人员名称
        serialNo: "", // 设备号
        fromSource: 0, // 用户来源
      },
      unitInfo: {}, //单位列表
      ruleValidate: {}, //rule验证
      fromSourceList: [
        { id: 0, label: "全部" },
        { id: 1, label: "后台" },
        { id: 2, label: "电子称" },
      ],
      // 表头
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70,
        },
        {
          title: "用户名称",
          key: "name",
          align: "center",
          minWidth: 105,
        },
        {
          title: "登录账号",
          key: "account",
          align: "center",
          minWidth: 135,
        },
        {
          title: "人脸图片",
          slot: "photoAddress",
          align: "center",
          minWidth: 135,
        },
        {
          title: "单位",
          key: "unitName",
          align: "center",
          minWidth: 105,
        },
        {
          title: "手机号码",
          key: "phone",
          align: "center",
          minWidth: 105,
        },
        {
          title: "更新时间",
          key: "updateTime",
          align: "center",
          minWidth: 135,
        },
        {
          title: "来源",
          key: "formSource",
          align: "center",
          minWidth: 105,
          render: (h, params) => {
            return h("div", params.row.fromSource == 1 ? "后台" : "电子称");
          },
        },

        {
          title: "操作",
          fixed: "right", // 右侧固定
          slot: "operation",
          align: "center",
          width: 245,
        },
      ],
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  created() {
    this.onInit();
  },
  mounted() {
    let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 2},
    {id: 4, name: '部门4', pid: 2},
    {id: 5, name: '部门5', pid: 3},
]
arr.sort((a,b) => {
  return  a.id - b.id
})
console.log(arr);
let arrObject = []
let inArrObject=(a,b) => {
  a.forEach(item => {
  if(item.id == b.pid)  {
    item.children.push(b)
    return
  }else {
    inArrObject(item.children,b)
  } 
  })

}
arr.forEach(item => {
  item.children = []
  if (arrObject.length ==0) {
    arrObject.push(item)
  }else {
    inArrObject(arrObject,item)
   }
})
console.log(arrObject);

    setTimeout(() => {
      this.tableHeight = window.innerHeight - 435; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {

    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 435; // 表格自适应高度
      }, 100);
    },
    onInit() {
      this.postApiOperatorInfoByPageApi();
      this.getUnitInfoApi();
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // 重置密码
    editPassword(row) {
      console.log(111);
      this.$refs["addPeople"].show(row, true);
    },
    // 添加
    onAdd() {
      this.$refs["addPeople"].show();
    },
    // 编辑
    onEdit(row) {
      this.$refs["addPeople"].show(row);
    },
    // 禁用人员
    onStatus(row) {
      this.postApisaveOperatorInfoApi(row);
    },
    // 删除
    //   onDelete(row) {
    //     this.$cu
    //       .dialog({
    //         params: row,
    //       })
    //       .then(({ id }) => {
    //         this.deleteTouchscaleListApi(id);
    //       });
    //   },
    //   单位列表 -----接口 getUnitInfo
    getUnitInfoApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        getUnitInfo().then((res) => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.unitInfo = res.data.records;
          } else {
            this.form.loading = false;
          }
          resolve();
        });
      });
    },
    // 用户列表---------------接口
    postApiOperatorInfoByPageApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        let params = {
          name: this.form.name, //用户名称
          fromSource: this.form.fromSource, //用户来源
          current: this.pages.page,
          size: this.pages.pageSize,
        };
        postApiOperatorInfoByPage(params).then((res) => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          } else {
            this.form.loading = false;
          }
          resolve();
        });
      });
    },
    //编辑人员数据
    postApisaveOperatorInfoApi(row) {
      let msg = row.status == 1 ? "禁用成功" : "启用成功";
      row.status = row.status == 0 ? 1 : 0;
      row.updateTime = new Date().getTime();
      row.updateBy = this.$store.state.vuex_user.base.id;
      return new Promise((resolve) => {
        postApisaveOperatorInfo(row).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(msg);
            this.onInit(); //刷新列表
          }
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
